<template>
  <div>
    <el-dialog title="收货地址" :visible="dialogShow" @close="cancle">
      <el-form :model="form" label-width="100px" :rules="rules" ref="form">
        <el-form-item label="姓名：" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="手机：" prop="mobile">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="入职时间：" prop="timeOfEntry">
          <!-- <el-input v-model="form.timeOfEntry"></el-input> -->
          <el-date-picker
            v-model="form.timeOfEntry"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="聘用形式：" prop="formOfEmployment">
          <el-input v-model="form.formOfEmployment"></el-input>
        </el-form-item>
        <el-form-item label="工号：" prop="workNumber">
          <el-input v-model="form.workNumber"></el-input>
        </el-form-item>
        <el-form-item label="部门：" class="myformItem" prop="departmentName">
          <el-input v-model="form.departmentName" @focus="focusClick">
          </el-input>
          <el-tree
            class="myTree"
            :data="data"
            default-expand-all
            expand-on-click-node
            v-if="treeShow"
            @node-click="nodeClick"
            :props="{ label: 'name' }"
          ></el-tree>
        </el-form-item>
        <el-form-item label="转正时间：" prop="correctionTime">
          <!-- <el-input v-model="form.correctionTime"></el-input> -->
          <el-date-picker
            v-model="form.correctionTime"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="sbumit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deptApi } from "@/api/departments";
import { addUserApi } from "@/api/elmentyess";
export default {
  props: ["dialogShow"],
  data() {
    return {
      treeShow: false,
      data: [],
      form: {
        username: "", //姓名
        mobile: "", //手机
        formOfEmployment: "", //聘用形式
        workNumber: "", //工号
        departmentName: "", //部门
        timeOfEntry: "", //入职时间
        correctionTime: "" //转正时间
      },
      rules: {
        username: [{ required: true, message: "不能为空", trigger: "blur" }], //姓名
        mobile: [{ required: true, message: "不能为空", trigger: "blur" }], //手机
        formOfEmployment: [
          { required: true, message: "不能为空", trigger: "blur" }
        ], //聘用形式
        workNumber: [{ required: true, message: "不能为空", trigger: "blur" }], //工号
        departmentName: [
          { required: true, message: "不能为空", trigger: "change" }
        ], //部门
        timeOfEntry: [{ required: true, message: "不能为空", trigger: "blur" }], //入职时间
        correctionTime: [
          { required: true, message: "不能为空", trigger: "blur" }
        ] //转正时间
      }
    };
  },
  methods: {
    async getdep() {
      let res = await deptApi();
      this.data = res.data.depts;
    },
    async nodeClick(data) {
      this.form.departmentName = data.name;
      this.treeShow = false;
    },
    focusClick() {
      this.treeShow = true;
    },
    cancle() {
      this.$emit("update:dialogShow", false);
    },
    sbumit() {
      this.$refs.form.validate(async res => {
        if (res) {
          let res = await addUserApi(this.form);
          this.$emit("update:dialogShow", false);
          this.$emit("getUserList");
          //   console.log(res)
        } else {
          console.log("这也不行呀你");
        }
      });
    }
  },
  created() {
    this.getdep();
  }
};
</script>

<style lang="scss">
.myformItem {
  position: relative;
  width: 80%;
  .el-tree {
    position: absolute;
    top: 050px;
    left: 0;
    // height: 40px;
    width: 100%;
    border: 1px solid #666;
    z-index: 333;
    border-radius: 8px;
  }
}
</style>
